<template>
  <div class="document-page">

    <div class="document-card">
      <h1 class="title">{{ article.title }}</h1>
      <div class="meta">
        <span>作者：{{ article.userId }}</span>
        <span>发布时间：{{ formatDate(article.createTime) }}</span>
        
      </div>
      <div class="content" v-html="article.content"></div>
      <div class="btnList">
        <button @click="handleCollect(article.id)">收藏文章</button>
        <button @click="handleLike(article.id)">点赞</button>
      </div>
    </div>













    <div class="comment-section">
      <h2 class="comment-title">评论（{{ comments.length }}）</h2>
      
      <!-- 评论输入框 -->
      <div class="comment-form">
        <textarea 
          v-model="newComment" 
          placeholder="写下你的评论..." 
          rows="3"
          class="comment-input"
        ></textarea>
        <button 
          @click="submitComment" 
          :disabled=" newComment.length>3? false : true "
          class="submit-btn"
        >
          发表评论
        </button>
      </div>
      

      <!-- 评论列表 -->
      <div class="comment-list">
        <div v-for="comment in comments" :key="comment.id" class="comment-item">

          <!-- 评论项 -->
          <div class="comment-header">
            <span class="comment-author">用户：{{ comment.user.nickname }}</span>
          </div>
          <div class="comment-content">{{ comment.content }}</div>
          <div class="comment-actions">
            <button @click="replyTo(comment.id)" class="reply-btn">回复</button>
          </div>
          
          <!-- 回复输入框 -->
          <div v-if="activeReply === comment.id" class="reply-form">
            <textarea
              v-model="replyContent"
              placeholder="写下你的回复..."
              rows="2"
              class="reply-input"
            ></textarea>
            <button 
              @click="submitReply(comment.id)"
              :disabled="replyContent.length<5"
              class="submit-reply-btn">
              提交回复
            </button>
          </div>

          <!-- 回复列表 -->
          <div v-if="comment.replies && comment.replies.length" class="reply-list">
            <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
              <div class="reply-header">
                <span class="reply-author">{{ reply.user.nickname }}</span>
              </div>
              <div class="reply-content">{{ reply.content }}</div>
            </div>
          </div>


        </div>
      </div>


    </div>


  </div>
</template>



















  
<script setup>
import { onMounted, ref } from 'vue'
import server from '@/api/server';
import { articleDetail } from '@/api/BlogVisit';
import { collectArt } from '@/api/BlogUser';
import { likeArt } from '@/api/BlogUser';
import { commentArt } from '@/api/BlogUser';
import { getArticleComment } from '@/api/BlogVisit';
import { replyComment } from '@/api/BlogUser';

const article = ref({
  id: 1,
  userId: 1,
  title: 'Vue 3 文档展示示例',
  author: '张三',
  picture: '',
  createTime: '2025-05-27',
  views: '',
  content: `
    <p>这是一个使用 Vue 3 创建的文档展示页面。可以在这里展示富文本内容，例如：</p>
    <ul>
      <li>段落文字</li>
      <li>标题、图片</li>
      <li>HTML 格式内容</li>
    </ul>
  `
})

function formatDate(datetime) {
  return new Date(datetime).toLocaleString()
}

//获取文章详情
onMounted(()=>{
  const params = {
    articleId: server.currentPageId
  }
  try {
    articleDetail(server.token, params).then((res)=>{
      if(res.data.code == 0){
        article.value = res.data.data
        
        setTimeout(() => {
          const imgList = document.querySelectorAll(".content img");
          imgList.forEach((img)=>{
            img.style.display = "block";
            img.style.width = "50%";
            img.style.margin = "0 auto";
          })
        }, 50);
        getCommentList()

      }else{

        alert("获取失败："+res.data.msg);

      }
    })
  } catch (error) {
    
    alert("获取失败："+ error);

  }
})

//获取评论
const getCommentList = ()=>{
  const params = {
    articleId: server.currentPageId
  }
  try {
    getArticleComment(params).then((res)=>{
      if (res.data.code==0) {
        comments.value = res.data.data
        console.log(res.data.data)
      } else {
        alert("获取失败："+res.data.msg)
      }
    })
  } catch (error) {
        alert("获取失败："+error)
  }
}

//文章收藏
const handleCollect = (articleId) => {
  const params = {
    articleId
  }
  try {
    collectArt(server.token, params).then((res)=>{
      if(res.data.code == 0){
        alert("收藏成功："+res.data.data)
      }else{
        alert("收藏失败："+res.data.msg)
      }
    })
  } catch (error) {
    alert("收藏失败："+error)
  }
}

//文章点赞
const handleLike = (articleId)=>{
  const params = {
    articleId
  }
  try {
    likeArt(server.token, params).then((res)=>{
      if(res.data.code == 0){
        alert("点赞成功："+res.data.data)
      }else{
        alert("点赞失败："+res.data.msg)
      }
    })
  } catch (error) {
    alert("点赞失败："+error)
  }
}




















//回复按钮
const activeReply = ref(-1)

const replyTo = (commentId)=>{
  if(activeReply.value == commentId){
    activeReply.value = -1
  }else{
    activeReply.value = commentId
  }
}

const comments = ref([{
  id: 1,
  user: {
    username: "hahahaha",
    nickname: "hahaha"
  },
  content: "这是一条评论内容",
  replies: [{
    id: 101,
    user: {
      username: "hahahaha",
      nickname: "hahaha"
    },
    commentId: 1,
    content: "这是一条回复内容"
  }]
}])

//评论文章
const newComment = ref("")

const submitComment = ()=>{
  if (!newComment.value.trim()) return;
  const data = {
    articleId: server.currentPageId,
    content: newComment.value
  }
  try {
    commentArt(server.token, data).then((res)=>{
      if (res.data.code==0) {
        alert("评论成功："+res.data.data)
        getCommentList()
        newComment.value = "";
      } else {
        alert("评论失败："+res.data.msg)
      }
    })
  } catch (error) {
        alert("评论失败："+error)
  }
}

//回复评论
const replyContent = ref("")

const submitReply = (commentId)=>{
  if (!replyContent.value.trim()) return;
  const data = {
    commentId: commentId,
    content: replyContent.value
  }
  try {
    replyComment(server.token, data).then((res)=>{
      if (res.data.code==0) {
        alert("回复成功："+res.data.data)
        getCommentList()
        replyContent.value = "";
      } else {
        alert("回复失败："+res.data.msg)
      }
    })
  } catch (error) {
        alert("回复失败："+error)
  }
}




























</script>
  
<style scoped>
div.btnList{
  display: flex;flex-flow: row nowrap;
  justify-content: space-evenly;
  width: 400px;margin: 20px auto 0px;
}

.document-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: #f5f7fa;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.document-card {
  background: #fff;
  padding: 30px;margin-bottom: 50px;
  padding-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.document-card button {
  display: block;  margin: 0 auto;
  width: 70px;height: 30px;

  background-color: #ff6699;
  border: none;
  color: white;
  border-radius: 4px;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.meta {
  font-size: 14px;
  color: #888;
  margin-bottom: 24px;
  display: flex;
  gap: 20px;
}

.content {
  width: 750px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}


.content ul {
  padding-left: 20px;
  list-style-type: disc;
}

.content p {
  margin-bottom: 1em;
}
























.comment-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.comment-title {
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.comment-form {
  margin-bottom: 30px;
}

.comment-input {
  width: 100%;height: 40px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 10px;

}

.submit-btn {
  padding: 8px 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}





.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.comment-author {
  font-weight: bold;
  color: #333;
}

.comment-time {
  color: #999;
}

.comment-content {
  line-height: 1.5;
  margin-bottom: 10px;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.reply-btn, .like-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
}

.like-btn.liked {
  color: #1890ff;
}

.reply-btn:hover, .like-btn:hover {
  color: #333;
}




.reply-form {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #eee;
}

.reply-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 8px;
  height: 15px;
}

.submit-reply-btn, .cancel-reply-btn {
  padding: 5px 12px;
  margin-right: 8px;
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}

.submit-reply-btn {
  background: #1890ff;
  color: white;
  border: none;
}

.submit-reply-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.cancel-reply-btn {
  background: none;
  border: 1px solid #ddd;
}



.reply-list {
  margin-top: 15px;
  padding-left: 20px;
  border-left: 2px solid #eee;
}

.reply-item {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 5px;
}

.reply-author {
  color: #1890ff;
  font-weight: bold;
}

.reply-time {
  color: #999;
}

.reply-content {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 5px;
}

.reply-actions {
  text-align: right;
}




</style>
